Day_21 用JavaScript做一個小遊戲

2023 iThome 鐵人賽

DAY 21

Modern Web

三十天持續努力挑戰py系列第 21 篇

15th鐵人賽

clevens1008

團隊NUTC_IMAC_WEB_桑貝比

2023-10-06 00:03:28

615 瀏覽

分享至

今天要教學的是用JS寫一款自己的網頁小遊戲，這是我在學習前期所自己練習的。
會用到html、js、css，這邊先把html程式碼貼上。

<!DOCTYPE html>
<html>
<head>
  <title>貪食蛇</title>
  <link rel="stylesheet" href="mystyle.css">
</head>
<body>
  <p>Score: <span id="score"></span></p> <!-- 顯示分數 -->
  <div class="container"> <!-- 遊戲區域 -->
    <div id="game-board"> <!-- 遊戲畫面 -->
      <img id="Image" src="" alt="隨機圖片"> <!-- 隨機圖片 -->
      <div id="player"></div>  <!-- 貪食蛇 -->
      <div id="target"></div> <!-- 目標 -->
    </div>
    <button id="bt1">switch</button> <!-- 切換圖片按鈕 -->
    <script src="myjs.js"></script> <!-- 引入js -->
  </div>
</body>
</html>

可以看到，html的部分相當簡單，那是因為主要的程式碼都會在JS上面，html僅僅是給他document可以抓取而已，每行都有註解，就不多講其作用。
這邊再貼上css樣式:

#game-board {
  width: 400px;
  height: 400px;
  border: 1px solid black;
  position: relative;
}

#player {
  width: 50px;
  height: 50px;
  background-color: blue;
  position: absolute;
  top: 0;
  left: 0;
}

#target {
  width: 50px;
  height: 50px;
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
}

#randomImage {
  width: 400px;
  height: 400px;
  position: absolute;
  top: 0;
  left: 0;
}
.container {
  margin: 0;
  padding: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
}


button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #b30000;
}

button:active {
  background-color: #710080;
}

button:disabled {
  background-color: #e9ecef;
  color: #6c757d;
  cursor: not-allowed;
}

#Image{
  width: 400px;
  max-height: 100%;
  position: relative;
  top: 0;
  left: 0;
}

主要設定玩家大小、目標大小、遊玩範圍、button的小效果，以及更換背景圖片的圖片。
接下來進入重點，js的部分，是其最多也最複雜的部份。我一步一步講解，首先要把html裡的元素讓js能抓取到，只用的方法不外乎就是getElementById之類的。

var gameBoard = document.getElementById('game-board');
var player = document.getElementById('player');
var target = document.getElementById('target');
var scoreElement = document.getElementById('score');

設定初值:

var playerX = 0;
var playerY = 0;
var score = 0;

寫目標物生成的函數:

function target_generate() {
  var targetX = Math.floor(Math.random() * (gameBoard.offsetWidth - target.offsetWidth));
  var targetY = Math.floor(Math.random() * (gameBoard.offsetHeight - target.offsetHeight));
  target.style.top = targetY + 'px';
  target.style.left = targetX + 'px';
}
target_generate();

寫判斷玩家+1分的函式，也就是玩家碰到目標物。

function areElementsTouching(element1, element2) {
  const rect1 = element1.getBoundingClientRect();
  const rect2 = element2.getBoundingClientRect();

  const isTouching = !(rect2.left > rect1.right ||
    rect2.right < rect1.left ||
    rect2.top > rect1.bottom ||
    rect2.bottom < rect1.top);

  return isTouching;
}

接下來就剩玩家移動，與執行target_generate()的function。

function movePlayer(event) {
  var key = event.keyCode;
  var step = 5;

  switch (key) {
    case 37: // Left arrow
      playerX -= step;
      break;
    case 38: // Up arrow
      playerY -= step;
      break;
    case 39: // Right arrow
      playerX += step;
      break;
    case 40: // Down arrow
      playerY += step;
      break;
  }


  player.style.top = playerY + 'px';
  player.style.left = playerX + 'px';

  if (areElementsTouching(player, target)) {
    target_generate();
    score = score + 1;
    scoreElement.innerHTML = score;
  }

}

這樣基本上就完成了，剩下一些美化的部分，我下面把全部的程式碼貼上。

var gameBoard = document.getElementById('game-board');
var player = document.getElementById('player');
var target = document.getElementById('target');
var scoreElement = document.getElementById('score');

var playerX = 0;
var playerY = 0;
var score = 0;


function target_generate() {
  var targetX = Math.floor(Math.random() * (gameBoard.offsetWidth - target.offsetWidth));
  var targetY = Math.floor(Math.random() * (gameBoard.offsetHeight - target.offsetHeight));
  target.style.top = targetY + 'px';
  target.style.left = targetX + 'px';
}
target_generate();

function movePlayer(event) {
  var key = event.keyCode;
  var step = 5;

  switch (key) {
    case 37: // Left arrow
      playerX -= step;
      break;
    case 38: // Up arrow
      playerY -= step;
      break;
    case 39: // Right arrow
      playerX += step;
      break;
    case 40: // Down arrow
      playerY += step;
      break;
  }


  player.style.top = playerY + 'px';
  player.style.left = playerX + 'px';

  if (areElementsTouching(player, target)) {
    target_generate();
    score = score + 1;
    scoreElement.innerHTML = score;
  }

}

function areElementsTouching(element1, element2) {
  const rect1 = element1.getBoundingClientRect();
  const rect2 = element2.getBoundingClientRect();

  const isTouching = !(rect2.left > rect1.right ||
    rect2.right < rect1.left ||
    rect2.top > rect1.bottom ||
    rect2.bottom < rect1.top);

  return isTouching;
}


document.addEventListener('keydown', movePlayer);


const  imgElement = document.getElementById('Image');

const imageUrls = [
  'img1.jpg',
  'img2.jpg',
  'img3.jpg',

];

var i = 0;

function img_generate() {
  const InedxImageUrl = imageUrls[i++ % imageUrls.length];
  imgElement.src = InedxImageUrl;
}

const myButton = document.getElementById('bt1');
img_generate();

myButton.addEventListener('click', function () {
  img_generate();
});

圖片必須自己放。
然後可以發現，這樣玩家是可以超出到遊戲範圍外面的，因為我忘記寫了XD。